<!--备份规则-->
<template>
  <div>
    <a-drawer :title="$t('Backup-rule')" placement="right" :visible="visible" width="80%" @close="onClose"
      :maskClosable="false">
      <!-- :maskClosable="false" -->
      <div style="margin-bottom: 10px">
        <a-button type="primary" @click="createBackupRule">{{ $t('Create') }}</a-button>
      </div>
      <a-table :columns="columns" :dataSource="tableData" :loading="tableLoading" size="small" bordered
        :pagination='pagination' rowKey="id" :locale="defaultSetting">
        <template slot="operation" slot-scope="text, record">
          <span class="detail-text" @click="editRule(record)">{{ $t('Edit') }}</span>
          <span class="detail-text" @click="deleteRule(record)">{{ $t('Delete') }}</span>
        </template>
      </a-table>
    </a-drawer>

    <CreateBackupRule v-if="create_rule_dialog" :visible="create_rule_dialog" @closeDialog="closeDialog" />

    <EditBackupRule v-if="edit_rule_dialog" :visible="edit_rule_dialog" :target="targetRule" @closeDialog="closeDialog" />

  </div>
</template>

<script>
import EmptyData from '@/components/common/EmptyData'
import CreateBackupRule from '@/views/operation/log_manage/subpage/operateLogOper/CreateBackupRule'
import EditBackupRule from '@/views/operation/log_manage/subpage/operateLogOper/EditBackupRule'

export default {
  name: "BackupRule",
  props: ['visible'],
  components: { CreateBackupRule, EditBackupRule },
  data() {
    return {
      defaultSetting: { emptyText: <EmptyData /> },
      tableData: [
        { id: 1, },
        { id: 2, },
        { id: 3, },
        { id: 4, },
        { id: 5, },
        { id: 6, },
      ],
      tableLoading: false,
      pagination: {
        defaultPageSize: 15,
        showTotal: total => `${this.$t('A-total-of')} ${total} ${this.$t('Data')}`,
        showSizeChanger: true,
        pageSizeOptions: ['15', '20', '30'],
        onShowSizeChange: (current, pageSize) => this.pageSize = pageSize,
        buildOptionText: (props) => `${props.value} / ${this.$t('page')}`
      },
      columns: [
        { title: this.$t('Set-ID'), dataIndex: 'id', key: 'id', ellipsis: true, },
        { title: this.$t('Username'), dataIndex: 'username', key: 'username', ellipsis: true, },
        { title: this.$t('Scheduled-backup-cycle'), dataIndex: 'time', key: 'time', ellipsis: true, },
        { title: this.$t('Storage-location2'), dataIndex: 'position', key: 'position', ellipsis: true, },
        { title: this.$t('Backup-store-dir'), dataIndex: 'dir', key: 'dir', ellipsis: true, },
        { title: this.$t('Operate'), dataIndex: 'operation', key: 'operation', scopedSlots: { customRender: 'operation' }, width: 130, ellipsis: true, },
      ],
      create_rule_dialog: false,
      edit_rule_dialog: false,
      targetRule: {}
    }
  },
  methods: {
    //创建备份规则
    createBackupRule() {
      this.create_rule_dialog = true;
    },

    //编辑备份规则
    editRule(record) {
      this.targetRule = record;
      this.edit_rule_dialog = true;
    },

    //删除备份规则
    deleteRule(record) {
      this.$confirm({
        title: this.$t('Del-backup-rule'),
        content: this.$store.state.language == 'zh' ?
          `删除备份规则"${record.id}"后，该备份规则将无法恢复！您确定要删除吗？` :
          `After deleting the backup rule "${record.id}", the backup rule cannot be restored! Are you sure you want to delete?`,
        okText: this.$t('Sure'),
        cancelText: this.$t('Cancel'),
        okType: 'danger',
        icon: () => {
          return <a-icon type="close-circle" />
        },
        onOk() {
          // return new Promise((resolve, reject) => {
          //   setTimeout(Math.random() > 0.5 ? resolve : reject, 1000);
          // }).catch(() => console.log('Oops errors!'));
        },
        onCancel() { },
      });
    },

    //关闭抽屉
    onClose() {
      this.$emit('closeDrawer');
    },

    //关闭创建/编辑规则弹窗
    closeDialog(type) {
      if (type == 'add') {
        this.create_rule_dialog = false;
      } else {
        this.edit_rule_dialog = false;
      }
    },
  },
}
</script>
<style scoped>
.detail-text {
  color: var(--themeColor);
  cursor: pointer;
  margin: 0 10px;
}
</style>